<template>
  <el-col>
    <el-menu
        active-text-color="#6da2b1"
        background-color="rgb(48, 64, 85)"
        class="el-menu-vertical-demo"
        default-active="HomePage"
        text-color="#fff"
        style="padding-top: 5px; border: none"
        @select="handleMenuSelect"
        @open="handleMenuSelect"
    >
      <el-menu-item index="HomePage">
        <el-icon>
          <Grid/>
        </el-icon>
        <span>首页</span>
      </el-menu-item>
      <el-sub-menu index="TaskManagerPage">
        <template #title>
          <el-icon>
            <Setting/>
          </el-icon>
          <span>调度任务</span>
        </template>
        <el-menu-item index="TaskManagerPage?appcode=appcode1">appcode1</el-menu-item>
        <el-menu-item index="TaskManagerPage?appcode=appcode2">appcode2</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="UserManagerPage">
        <el-icon>
          <UserFilled/>
        </el-icon>
        <span>用户管理</span>
      </el-menu-item>
      <el-menu-item index="UseDirectionsPage">
        <el-icon>
          <HelpFilled/>
        </el-icon>
        <span>使用说明</span>
      </el-menu-item>
    </el-menu>
  </el-col>
</template>

<script setup>
import {ref} from 'vue';
import {useRouter} from 'vue-router';

const router = useRouter();
const activeMenu = ref(router.currentRoute.value.path);

const handleMenuSelect = (index) => {
  router.push(index);
  activeMenu.value = index;
};
</script>